	&.check-in,&.box-check { 
		label:after{
			content:""; 
			transformTest(rotateZ(-36deg) translateY(-10px) translateX(24px)); 
			display: block;
		}

		label:before,label:after {
			width: 3px;
			height: 100%;
			background: color-cancel;
			transition(cubic-bezier(0.550, 0.085, 0.680, 0.530) all 0.2s)
		}

		label:before {
			transformTest(rotateZ(38deg) translateY(-7px) translateX(11px))
		}
		
		input:checked ~ label:before,input:checked ~ label:after {
			background: color-on;
		}

		input:checked ~ label:before {
			height: 100%;
			transformTest(rotateZ(38deg) translateY(-17px) translateX(14px))
		}

		input:checked ~ label:after {
			height: 61%; 
			transformTest(rotateZ(-36deg) translateY(-10px) translateX(21px))
		}
	}

	/***** BOX CHECK ************/
	&.box-check {
		label:before,label:after {
			height:72%;
		}
		
		label:before {
			transformTest(rotateZ(31deg) translateY(-3px) translateX(11px))
		}

		label:after {
			transformTest(rotateZ(-30deg) translateY(-7px) translateX(16px))
		}
	}
	
	&.check-in,&.box-check{
		label {
			height: 28px; 
			max-width: 28px;
		}
	}

	/***** PUFT'S ************/
	&.check-in,&.box-check,&.puft-in,&.puft-out,&.puft-left,&.puft-right,&.puft-top,&.puft-bottom {
		label {
			position: relative; 
			cursor: pointer; 
			width: 100%; 
			padding: 2px;

			&:before {
				content:"";
			}
		}

		label:before {
			display:block; 
			border-radius: 3px; 
		} 
	}

	/***** PUFT'S ************/
	&.puft-in,&.puft-out,&.puft-left,&.puft-right,&.puft-top,&.puft-bottom {
		label {
			max-width: 28px; 
			height: 28px;
		}
	}
	
	&.puft-in,&.puft-out,&.puft-left,&.puft-right,&.puft-top,&.puft-bottom,&.box-check {
		label {
			colorCheckbox();
		}
	}

	 &.puft-left,&.puft-right,&.puft-top,&.puft-bottom {
		&.inverted label:before {
			background:color-box;
		}
		&.danger label:before {
			background:color-cancel;
		}
		&.info label:before {
			background:color-info;
		}

	 	label {
	 		overflow: hidden;
	 	}
	 	label:before {
	 		background:color-on; 
	 		transition(cubic-bezier(0.550, 0.085, 0.680, 0.530) all 0.2s)
	 	}
		input:checked ~ label:before {
			height: 100%; 
			width:100%;
		}
	 }

	/***** PUFT-TOP and PUFT-BOTTOM *****/
	&.puft-top,&.puft-bottom {
	 	label:before {
	 		height:0; 
	 		width: 100%;
	 	}
	}

	&.puft-bottom {
	 	label:before {
	 		transformTest(translateY(28px))
	 	}
		input:checked ~ label:before {
			transformTest(translateY(0))
		}
	}
	
	/***** PUFT-LEFT and PUFT-RIGHT *****/
	&.puft-left,&.puft-right {
		label:before {
			width: 0; 
			height: 100%;
		}
		input:checked ~ label:before {
			transformTest(translateX(0))
		}
	}

	&.puft-right {
		label:before {
			transformTest(translateX(28px))
		}
	}

	/***** PUFT-IN and PUFT-OUT *****/
	&.puft-in,&.puft-out {
	 	&.inverted {
	 		label:before {
	 			box-shadow:inset 0 0 0 0 color-box
	 		}
			input:checked ~ label:before {
				box-shadow:inset 0 0 67px 4px color-box;
			}
		}

	 	&.danger {
	 		label:before {
	 			box-shadow:inset 0 0 0 0 color-cancel
	 		}
			input:checked ~ label:before {
				box-shadow:inset 0 0 67px 4px color-cancel;
			}
		}

	 	&.info {
	 		label:before {
	 			box-shadow:inset 0 0 0 0 color-info
	 		}
			input:checked ~ label:before {
				box-shadow:inset 0 0 67px 4px color-info;
			}
		}

	 	label:before { 
	 		width: 100%; 
	 		height: 100%; 
	 		box-shadow: inset 0 0 0 0 color-on; 
	 		transition(all ease-out 0.2s); 
	 	}

		input:checked ~ label:before {
			box-shadow:inset 0 0 67px 4px color-on; 
			transformTest(scale(1)); 
			transition(all ease-out 0.2s); 
		}
	}


	&.puft-in label:before {
		transformTest(scale(1.2));
	}
	&.puft-out label:before {
		transformTest(scale(0.2));
	}

	&.triggerOnOf, &.trigger {
		label {
			transition(all ease-out 0.1s); 
			padding-top:3px; 
			display: block;padding-left: 60px; 
			position: relative;

			&:after {
				width: 20px;
				height: 20px;
				border-radius: 100%;
				background: #fff;
				border:solid 1px #E1E0E0; 
				cursor: pointer; 
				position: absolute;
				top: 2px;
				left: -2px;
			}
			&:before,&:after {
				transition(all linear 0.2s);
				content: "";
				display: block;
			}
			&:hover:before {
				background: #D4D4D4;
			}
			&:before {
				width: 50px;
			}
		} 

		input:checked ~ label {
			&:after {
				transformTest(translateX(32px));
			}
			&:before {
				background: color-on;
			}
		}
	}

	&.triggerOnOf {
		label:before {
			height: 19px;
			absolute(3px,0);
			border: solid 1px #F0F0F0;
			border-radius: 10px; 
			background: #F0F0F0; 
			cursor: pointer;
		}

		input:checked ~ label{
			color:color-on;
		}

		&.inverted input:checked ~ label{
			color:color-box;
		}
		
		&.inverted input:checked ~ label:before {
			background: color-box
		}

		&.danger input:checked ~ label{
			color:color-cancel;
		}
		
		&.danger input:checked ~ label:before {
			background: color-cancel
		}

		&.info input:checked ~ label{
			color:color-info;
		}

		&.info input:checked ~ label:before {
			background: color-info
		}

	}

	&.trigger {
		label:before {
			border-top: solid 2px #ccc; 
			absolute(12px,0);
		}
	}